<template>
	<view class="id-box">
		<view class="content">
			<view class="id-img" @tap="chooseImg(1)">
				<image class="img" :src="id_img_url.id_img_1_url" v-if="id_img_url.id_img_1_url" :style="{height:h}"/>
				<image class="img" src="/static/icon/mine/id-before.png" v-else :style="{height:h}"/>
				<view class="text">身份证正面</view>
			</view>
			<view class="id-img" @tap="chooseImg(2)">
				<image class="img" :src="id_img_url.id_img_2_url" v-if="id_img_url.id_img_2_url" :style="{height:h}"/>
				<image class="img" src="/static/icon/mine/id-after.png" v-else :style="{height:h}"/>
				<view class="text">身份证反面</view>
			</view>
			<view class="id-img" @tap="chooseImg(3)">
				<image class="img" :src="id_img_url.id_img_3_url" v-if="id_img_url.id_img_3_url" :style="{height:h}"/>
				<image class="img" src="/static/icon/mine/id-man.png" v-else :style="{height:h}"/>
				<view class="text">手持身份证</view>
			</view>
		</view>
		<view class="tips"> 注意：支持jpg、png、jpeg，每张大小不超过2M</view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { uploadImgApi } from '@/service/index.js'
	const emit = defineEmits(['idImg'])
	const { safeArea } = uni.getSystemInfoSync()
	const h = computed(() => ((safeArea.width - 66) / 2) / 1.56 + 'px' )
	const id_img = ref({
		id_img_1: '',
		id_img_2: '',
		id_img_3: ''
	})
	const id_img_url = ref({
		id_img_1_url: '',
		id_img_2_url: '',
		id_img_3_url: ''
	})
	const chooseImg = (i) => {
		uni.chooseImage({
			count: 1,
			success: (res) => {
				uploadImgApi(res.tempFilePaths[0]).then(res => {
					if(i == 1) {
						id_img.value.id_img_1 = res.id
						id_img_url.value.id_img_1_url = res.path
					} else if (i == 2) {
						id_img.value.id_img_2 = res.id
						id_img_url.value.id_img_2_url = res.path
					} else {
						id_img.value.id_img_3 = res.id
						id_img_url.value.id_img_3_url = res.path
					}
					emit('idImg', id_img.value)
				})
			}
		})
	}
</script>

<style lang="scss" scoped>
	.id-box {
		.content {
			display: grid;
			gap: 10px;
			text-align: center;
			margin-bottom: 4px;
			grid-template-columns: repeat(2, 1fr);
			.id-img {
				.img {
					width: 100%;
					margin-bottom: 6px;
				}
				.text {
					color: #999999;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
		.tips {
			color: #FF3B1E;
			font-size: 12px;
			font-weight: 400;
			line-height: 20px;
		}
	}
</style>